<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    {% if nav_tab == "hot" or nav_tab == "" %}
        热门讲师
    {% endif %}
    {% if nav_tab == "all" %}
        所有讲师
    {% endif %}

{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        <div class="columns is-multiline">
            {# 切换导航栏 #}
            <div class="column is-full">
                <div class="tabs is-centered">
                    <ul>
                        <li class="{% if nav_tab == "hot" or nav_tab == "" %} is-active {% endif %}">
                            <a href="{% url 'org:teacher_list' %}?nav_tab=hot">
                                <span>
                                    <strong>
                                        热&nbsp;门&nbsp;讲&nbsp;师
                                        {% if nav_tab == "hot" or nav_tab == "" %}
                                            【共&nbsp;{{ teacher_hot_nums }}&nbsp;个】
                                        {% endif %}
                                    </strong>
                                </span>
                            </a>
                        </li>
                        <li class="{% if nav_tab == "all" %} is-active {% endif %}">
                            <a href="{% url 'org:teacher_list' %}?nav_tab=all">
                                <span>
                                    <strong>
                                        所&nbsp;有&nbsp;讲&nbsp;师
                                        {% if nav_tab == "all" %}
                                            【共&nbsp;{{ teacher_nums }}&nbsp;个】
                                        {% endif %}
                                    </strong>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            {% if nav_tab == "hot" or nav_tab == "" %}
                {# 热门讲师： #}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        {# 讲师列表 #}
                        <div class="column is-full">
                            <div class="columns is-multiline">
                                {% for teacher in teachers_hot.object_list %}
                                    <div class="column is-3-desktop">
                                        <div class="card">
                                            <div class="card-content has-background-primary">
                                                <div class="media">
                                                    <div class="media-left">
                                                        <figure class="image is-48x48">
                                                            <a href="{% url 'org:teacher_detail' teacher.id %}">
                                                                <img class="is-rounded"
                                                                     src="{{ MEDIA_URL }}{{ teacher.avatar }}"
                                                                     alt="Placeholder image">
                                                            </a>
                                                        </figure>
                                                        </a>
                                                    </div>
                                                    <div class="media-content">
                                                        <p class="title is-4">
                                                            <a href="{% url 'org:teacher_detail' teacher.id %}"
                                                               class="has-text-link-light">
                                                                {{ teacher.name }}
                                                            </a>
                                                        </p>
                                                        <p class="subtitle is-6">{{ teacher.characteristic }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-content columns is-multiline">
                                                <div class="column is-full box has-background-primary">
                                                    <strong>点击数<i class="fa fa-hand-pointer-o"
                                                                  aria-hidden="true"></i>
                                                        ：{{ teacher.click_nums }}</strong>
                                                </div>
                                                <div class="column is-full box has-background-primary">
                                                    <strong>收藏数<i class="fa fa-star" aria-hidden="true"></i>
                                                        ：{{ teacher.fav_nums }}</strong>
                                                </div>
                                                <div class="column is-full box has-background-primary">
                                                    <strong>课程数<i class="fa fa-book" aria-hidden="true"></i>
                                                        ：{{ teacher.course_nums }}</strong>
                                                </div>
                                                <div class="column is-full box has-background-primary">
                                                    <strong>工作年限<i class="fa fa-sun-o" aria-hidden="true"></i>
                                                        ：{{ teacher.work_years }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                                {# 分页 #}
                                <div class="column is-full">
                                    <nav class="pagination is-rounded is-centered" role="navigation"
                                         aria-label="pagination">

                                        {% if teachers.has_previous %}
                                            <a class="pagination-previous"
                                               href="?{{ teachers.previous_page_number.querystring }}">上一页</a>
                                        {% endif %}
                                        <ul class="pagination-list">
                                            {% for page in teachers.pages %}
                                                {% if page %}
                                                    {% ifequal page teachers.number %}
                                                        <li>
                                                            <a class="pagination-link is-current"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li>
                                                            <a class="pagination-link"
                                                               href="?{{ page.querystring }}"
                                                               aria-label="Goto page 1">
                                                                {{ page }}
                                                            </a>
                                                        </li>
                                                    {% endifequal %}
                                                {% else %}
                                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                        {% if teachers.has_next %}
                                            <a class="pagination-next"
                                               href="?{{ teachers.next_page_number.querystring }}">
                                                下一页
                                            </a>
                                        {% endif %}
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {# 所有讲师： #}
            {% if nav_tab == "all" %}
                <div class="column is-full">
                    <div class="columns is-multiline">
                        <div class="column is-full">
                            <div class="columns is-multiline">
                                {# 讲师列表 #}
                                <div class="column is-full">
                                    <div class="columns is-multiline">
                                        {% for teacher in teachers.object_list %}
                                            <div class="column is-3-desktop">
                                                <div class="card">
                                                    <div class="card-content has-background-primary">
                                                        <div class="media">
                                                            <div class="media-left">
                                                                <figure class="image is-48x48">
                                                                    <a href="{% url 'org:teacher_detail' teacher.id %}">
                                                                        <img class="is-rounded"
                                                                             src="{{ MEDIA_URL }}{{ teacher.avatar }}"
                                                                             alt="Placeholder image">
                                                                    </a>
                                                                </figure>
                                                                </a>
                                                            </div>
                                                            <div class="media-content">
                                                                <p class="title is-4">
                                                                    <a href="{% url 'org:teacher_detail' teacher.id %}"
                                                                       class="has-text-link-light">
                                                                        {{ teacher.name }}
                                                                    </a>
                                                                </p>
                                                                <p class="subtitle is-6">{{ teacher.characteristic }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-content columns is-multiline">
                                                        <div class="column is-full box has-background-primary">
                                                            <strong>点击数<i class="fa fa-hand-pointer-o"
                                                                          aria-hidden="true"></i>
                                                                ：{{ teacher.click_nums }}</strong>
                                                        </div>
                                                        <div class="column is-full box has-background-primary">
                                                            <strong>收藏数<i class="fa fa-star" aria-hidden="true"></i>
                                                                ：{{ teacher.fav_nums }}</strong>
                                                        </div>
                                                        <div class="column is-full box has-background-primary">
                                                            <strong>课程数<i class="fa fa-book" aria-hidden="true"></i>
                                                                ：{{ teacher.course_nums }}</strong>
                                                        </div>
                                                        <div class="column is-full box has-background-primary">
                                                            <strong>工作年限<i class="fa fa-sun-o" aria-hidden="true"></i>
                                                                ：{{ teacher.work_years }}</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                        {# 分页 #}
                                        <div class="column is-full">
                                            <nav class="pagination is-rounded is-centered" role="navigation"
                                                 aria-label="pagination">

                                                {% if teachers.has_previous %}
                                                    <a class="pagination-previous"
                                                       href="?{{ teachers.previous_page_number.querystring }}">上一页</a>
                                                {% endif %}
                                                <ul class="pagination-list">
                                                    {% for page in teachers.pages %}
                                                        {% if page %}
                                                            {% ifequal page teachers.number %}
                                                                <li>
                                                                    <a class="pagination-link is-current"
                                                                       href="?{{ page.querystring }}"
                                                                       aria-label="Goto page 1">
                                                                        {{ page }}
                                                                    </a>
                                                                </li>
                                                            {% else %}
                                                                <li>
                                                                    <a class="pagination-link"
                                                                       href="?{{ page.querystring }}"
                                                                       aria-label="Goto page 1">
                                                                        {{ page }}
                                                                    </a>
                                                                </li>
                                                            {% endifequal %}
                                                        {% else %}
                                                            <li><span class="pagination-ellipsis">&hellip;</span></li>
                                                        {% endif %}
                                                    {% endfor %}
                                                </ul>
                                                {% if teachers.has_next %}
                                                    <a class="pagination-next"
                                                       href="?{{ teachers.next_page_number.querystring }}">
                                                        下一页
                                                    </a>
                                                {% endif %}
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>
    </main>

{% endblock %}